<template>
    <div class="waves">
        <div class="weather">
            <div class="wday">
                <span class="p2">{{ systemDatea }}&nbsp;{{ week }}&nbsp;&nbsp;&nbsp;</span>
                
            </div>
            <div class="logout">
                <div class="info">
                    <span>{{ userName || "admin" }}你好，欢迎您！</span>
                    <a href="javascript:void(0);" @click="logout">[注销]</a>
                </div>
                <div class="avatar">
                    <img
                        v-if="!userIcon"
                        src="../../../static/img/doctor.png"
                        style="cursor: pointer"
                    />
                    <img
                        v-if="userIcon"
                        :src="userIcon"
                        style="cursor: pointer"
                    />
                </div>
            </div>
        </div>
        <div class="all">
            <div
                class="lefter"
                :class="{
                    a: index == 0,
                    b: index == 1,
                    c: index == 2,
                    d: index == 3,
                    e: index == 4,
                    f: index == 5,
                    j: index == 6,
                    h: index == 7,
                    i: index == 8,
                    k: index == 9,
                    g: index == 10,
                }"
                v-for="(item, index) in leftMenuLists"
                :key="index"
                @click="showurl(item)"
            >
                <i
                    class="iconfont icon-jianguan"
                    v-if="item.name === '综合监管'"
                ></i>
                <i
                    class="iconfont icon-yihu"
                    v-if="item.name === '医务人员运营'"
                ></i>
                <i
                    class="iconfont icon-jigou"
                    v-if="item.name === '公众运营'"
                ></i>
                <i
                    class="iconfont icon-gongzhong"
                    v-if="item.name === '机构运营'"
                ></i>
                <i
                    class="iconfont icon-peizhi"
                    v-if="item.name === '配置中心'"
                ></i>
                <i
                    class="iconfont icon-dictionary"
                    v-if="item.name === '目录字典'"
                ></i>
                <i
                    class="iconfont icon-caiwu"
                    v-if="item.name === '统一支付平台'"
                ></i>
                <i
                    class="iconfont icon-chufang"
                    v-if="item.name === '处方共享'"
                ></i>
                <i
                    class="iconfont icon-jiayi"
                    v-if="item.name === '家庭医生签约服务平台'"
                ></i>
                <i
                    class="iconfont icon-hesuanjiance"
                    v-if="item.name === '核酸检测'"
                ></i>
                <i
                  class="iconfont icon-zhuankeguanli"
                  v-if="item.name === '专科管理'"
                ></i>
                <div class="text">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import { showCal } from "../../assets/js/datatime";
import cookie from "../../utils/cookie.js";
import { Encrypt, Decrypt } from "../../plugins/aes.js";
import createWaves from "./ShaderProgram";
export default {
    data() {
        return {
            userName: "",
            userIcon: "",
            lunarcalendar: "",
            systemDatea: "",
            week: "",
            // menulist: [
            //     { name: "综合监督管理", color: "a" },
            //     { name: "机构运营配置", color: "b" },
            //     { name: "医护人员运营", color: "c" },
            //     { name: "公众平台运营", color: "d" },
            //     { name: "处方共享平台", color: "e" },
            //     { name: "财务管理", color: "f" },
            //     { name: "平台配置中心", color: "j" },
            //     { name: "基础字典目录", color: "h" },
            // ],
            topActiveName: null,
            leftActiveName: null,
            openList: [],
            topMenuLists: [],
        };
    },
    created() {
        this.lunarcalendar = showCal();
        this.userName = cookie.getCookie("userName");
        this.userIcon = cookie.getCookie("userIcon");
        this.addDate();
        //一级菜单相关
        let randmId;
        if (this.$store.state.env != "dev") {
            randmId = cookie.getCookie("randmId");
            if (!randmId) {
                // 公用方法
                this.functionJS.queryNavgationTo(this, "/login");
                return;
            }
        }
        this.$store.commit("setTopMenuList");
        let topMenuList = this.$store.state.topMenuList;
        let leftMenuList = this.$store.state.leftMenuList;
        if (topMenuList.length > 0) {
            this.topMenuLists = topMenuList;
        } else {
            // 公用方法
            this.functionJS.queryNavgationTo(this, "/login");
        }
    },
    mounted() {
        createWaves(".waves")
        
        //获取一级菜单
        let fullPath = this.$route.fullPath;
        for (let item of this.$store.state.topMenuList) {
            let RegObj = new RegExp(`${item.type}`, "ig");
            if (RegObj.test(fullPath)) {
                this.topActiveName = item.id;
                break;
            }
        }
        if (this.topActiveName == null)
            this.topActiveName = this.$store.state.topMenuList[0].id;
        if (fullPath == "/index") {
            this.topActiveName = this.$store.state.topMenuList[0].id;
        }
        this.$store.commit("setLeftMenuList", this.topActiveName);
        for (let keys in this.leftMenuLists) {
            for (let key in this.leftMenuLists[keys].childLists) {
                if (
                    this.leftMenuLists[keys].childLists[key].webPath == fullPath
                ) {
                    this.leftActiveName = `${this.leftMenuLists[keys].id}-${this.leftMenuLists[keys].childLists[key].id}`;
                    this.openList[0] = parseInt(keys);
                    break;
                }
            }
        }
    },
    beforeRouteUpdate(to, from, next) {
        for (let keys in this.leftMenuLists) {
            for (let key in this.leftMenuLists[keys].childLists) {
                if (
                    this.leftMenuLists[keys].childLists[key].webPath ==
                    to.fullPath
                ) {
                    this.leftActiveName = `${this.leftMenuLists[keys].id}-${this.leftMenuLists[keys].childLists[key].id}`;
                    this.openList[0] = parseInt(keys);
                    break;
                }
            }
        }
        next();
    },
    computed: {
        leftMenuLists() {
            return this.$store.state.leftMenuList;
        },
    },
    methods: {
        //时间显示
        addDate() {
            let nowDate = new Date();
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            };
            if (date.month < 9) {
                date.month = "0" + date.month;
            }
            if (date.date < 9) {
                date.date = "0" + date.date;
            }
            this.systemDatea =
                date.year + "年" + date.month + "月" + date.date + "日";
            this.systemDateb =
                date.year + "." + date.month + "." + date.date + ".";
            /*计算周几*/
            let a = [
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ];
            this.week = a[nowDate.getDay()];
        },
        //登陆人头像修改
        edit() {
            // 公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/maintain/admin/user/edit",
                {
                    id: this.operateUserId,
                }
            );
        },
        //当前账号退出登录
        logout() {
            window.localStorage.removeItem("access_token");
            window.localStorage.removeItem("top");
            window.localStorage.removeItem("sun1");
            window.localStorage.removeItem("sun2");
            window.localStorage.removeItem("sun3");
            window.localStorage.removeItem("sun4");
            window.localStorage.removeItem("sun5");
            // window.localStorage.clear();
            // window.sessionStorage.clear();
            cookie.delCookie("userName");
            cookie.delCookie("userIcon");
            cookie.delCookie("randmId");
            cookie.delCookie("operateUserId");
            cookie.delCookie("idtt");
            cookie.delCookie("idttC");
            cookie.delCookie("access_user");
            cookie.delCookie("ownArea");
            // 公用方法
            // this.functionJS.queryNavgationTo(this, '/login');
            window.location.href = "#/login";
            window.close();
        },
        //跳转到二级菜单页
        showurl(item) {
            sessionStorage.setItem("navigation", JSON.stringify(item));
            this.$router.push({ path: "./index" });
        },
    },
};
</script>
<style lang="less" scoped>
html,
body {
    overflow: hidden;
}
canvas {
    display: block;
}
.waves {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, #33cccc 100%);
    overflow: auto;
}
.all {
    width: 80%;
    min-height: 400px;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 99;
}
.a {
    background: chocolate;
}
.b {
    background: #006699;
}
.c {
    background: #009999;
}
.d {
    background: #660099;
}
.e {
    background: #6600ff;
}
.f {
    background: #339900;
}
.j {
    background: #996600;
}
.h {
    background: #33cccc;
}
.i {
    background: #006600;
}
.k {
    background: #2d6cff;
}
.g {
  background: #9df33b;
}
.weather {
    width: 90%;
    height: 100px;
    position: absolute;
    top: 40px;
    left: 50px;
    display: flex;
    .wday {
        pointer-events: none;
        width: 85%;
        .p2 {
            color: #fff;
            font-size: 16px;
            position: relative;
            top: 10px;
        }
    }
    .logout {
        width: 300px;
        display: flex;
        position: relative;
        color: #fff;
        height: 60px;
        z-index: 99999;
            font-size: 16px;
        .avatar {
            padding: 1px 5px 0 15px;
            img {
                width: 35px;
                height: 35px;
                border: 2px solid #fff;
                border-radius: 50%;
            }
        }
        .info {
            line-height: 22px;
            position: relative;
            top: 9px;
            text-align: center;
            a {
                color: #ff9900;
                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
}
.lefter {
    width: 12%;
    height: 180px;
    float: left;
    margin: 0 35px 50px 0;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    // box-shadow: 0 0 20px 5px rgba(153, 0, 255, 0.4);
    box-shadow: 0 0 20px 5px rgba(51, 0, 102, 0.4);
    img {
        width: 120px;
        height: 120px;
        margin: 10px 0 20px 0;
    }
    .iconfont {
        font-size: 90px;
        margin: 10px 0 20px 0;
        color: #fff;
    }
    .text {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        margin-top: -10px;
        letter-spacing: 2px;
        position: relative;
        bottom: 0px;
        font-family: Arial, Helvetica, sans-serif;
    }
}
.lefter:hover {
    box-shadow: 0 0 30px 10px rgba(100, 100, 255, 0.6);
    background-color: #330099;
    background-color: #6633cc;
    .text {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        margin-top: -10px;
        letter-spacing: 2px;
        font-family: Arial, Helvetica, sans-serif;
    }
}
</style>
